<template>
	<view class="alley-food-component">
		<!-- 1. 顶部四个分类Tab -->
		<view class="category-tabs">
			<view
				class="tab-item"
				v-for="(category, index) in categories"
				:key="index"
				:class="{ 'is-active': currentCategoryIndex === index }"
				@click="changeCategory(index)"
			>
				<image :src="category.icon" class="tab-icon" mode="aspectFit"></image>
				<text class="tab-text">{{ category.name }}</text>
				<text class="tab-sub">{{ category.sub }}</text>
			</view>
		</view>

		<!-- 2. 内容展示区域 -->
		<view class="content-display-area">
			<!-- 使用v-for和v-show来渲染并切换对应分类的内容 -->
			<view
				v-for="(contentList, index) in categoryData"
				:key="index"
				v-show="currentCategoryIndex === index"
			>
				<!-- 遍历当前分类下的卡片数据 -->
				<view
					class="content-card"
					v-for="item in contentList"
					:key="item.id"
					@click="navigateToDetail(item)"
				>
					<!-- 卡片上部：左图右文 -->
					<view class="card-top">
						<view class="main-image">
							<image class="image" :src="item.mainImage"></image>
						</view>
						
						<view class="info-section">
							<text class="info-title">{{ item.title }}</text>
							<view class="info-tags">
								<u-tag 
									v-for="tag in item.tags" 
									:key="tag" 
									:text="tag" 
									size="mini"
									shape="circle" 
									bgColor="#FFFFFF" 
									color="#FE6D2B" 
									borderColor="#FE6D2B">
								</u-tag>
							</view>
							<text class="info-description">{{ item.description }}</text>
							<!-- <view class="explore-button">
								<u-icon name="search" color="#fff" size="40"></u-icon>
							</view> -->
						</view>
					</view>
					
					<!-- 卡片下部：媒体网格和话题 -->
					<view class="card-bottom">
					    <scroll-view class="media-scroll-view" scroll-x="true" :show-scrollbar="false">
					        <view class="media-list">
					            <!-- 遍历媒体数据 -->
					            <view class="media-item" v-for="(media, mediaIndex) in item.mediaGrid" :key="mediaIndex" @click.stop="playVideo(media)">
					                <!-- 媒体封面（图片或视频缩略图） -->
					                <view class="media-thumbnail-wrapper">
					                    <image class="image" :src="media.thumbnail" radius="12rpx"></image>
					                    <!-- 如果是视频，显示播放图标 -->
					                    <!-- <view v-if="media.type === 'video'" class="play-icon-overlay">
					                        <u-icon name="play-right-fill" color="rgba(255, 255, 255, 0.9)" size="7"></u-icon>
					                    </view> -->
					                </view>
					                <!-- 媒体标题 -->
					                <text class="media-title">{{ media.title }}</text>
					            </view>
					        </view>
					    </scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "AlleyFood",
	data() {
		return {
			currentCategoryIndex: 0,
			// 顶部Tab分类数据
			categories: [
				{ name: "走进小巷", sub:'人间烟火气', icon: "/static/index/food/icon_alley_inactive.png" },
				{ name: "去大馆子", sub:'倍儿有面子', icon: "/static/index/food/icon_restaurant_inactive.png" },
				{ name: "特产名菜", sub:'就是这个味儿', icon: "/static/index/food/icon_dishes_inactive.png" },
			],
			// 所有分类对应的内容数据
			categoryData: [
				
				// 分类0: 走进小巷 (3条模拟数据)
				[
					{
						id: 101,
						mainImage: "http://www.hacn86.cn/alley-food/daxuecheng.png",
						title: "大学城美食街",
						tags: ["街头小吃", "平价美食"],
						description: "坐落于城南大学城附近的美食小吃街，多样实惠，氛围青春活力，现场制作新鲜，是学生..",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/daxuecheng1.png", type: "image", title: "人间烟火味尽在大.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/daxuecheng2.png", type: "video", title: "淮安大学城宝藏街.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/daxuecheng3.png", type: "video", title: "50元吃遍淮安最大.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/daxuecheng4.png", type: "image", title: "东站下车直奔大学.."}
						],
					},
					{
						id: 102,
						mainImage: "http://www.hacn86.cn/alley-food/nanmenxiaojie.png",
						title: "清江浦南门小街",
						tags: ["小巷美食", "淮安地道小巷"],
						description: "清江浦南门小街，被当地人称作为最老最正宗的碳水一条街，结合了菜场+小吃，是附近居..",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/nanmenxiaojie1.png", type: "image", title: "淮安这条街是真有.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/nanmenxiaojie2.png", type: "video", title: "外地来淮安直接冲.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/nanmenxiaojie3.png", type: "image", title: "一条街让你吃到饱.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/nanmenxiaojie4.png", type: "video", title: "南门小街最强合集.." },
						],
					},
					{
						id: 103,
						mainImage: "http://www.hacn86.cn/alley-food/huajie.png",
						title: "淮安花街文庙",
						tags: ["网红打卡地", "《北上》原型"],
						description: "作为热播剧《北上》里“洪淮市花街”的原型，这条位于江苏淮安清江浦区的老街，使得不..",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/huajie1.png", type: "image", title: "百米淮安花街藏着.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/huajie2.png", type: "image", title: "古街藏着《北上》同.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/huajie3.png", type: "video", title: "淮安文庙花街吃了.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/huajie4.png", type: "video", title: "挖到宝啦！文庙氛.." },
						],
					},
				],
				// 分类1: 去大馆子 (3条模拟数据)
				[
					{
						id: 201,
						mainImage: "http://www.hacn86.cn/alley-food/fangfangsifangcai.png",
						title: "芳芳私房菜",
						tags: ["创新淮扬菜", "私房菜"],
						description: "秉持“诚信、绿色、健康、美味”宗旨，在淮扬菜基础上兼收各地风味之长，创新出具有私房菜..",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/fangfangsifangcai1.png", type: "image", title: "淮安这家私房菜必..  " },
							{ thumbnail: "http://www.hacn86.cn/alley-food/fangfangsifangcai2.png", type: "image", title: "被私藏的淮扬菜馆.. " },
							{ thumbnail: "http://www.hacn86.cn/alley-food/fangfangsifangcai3.png", type: "video", title: "淮安 | 芳芳私房菜.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/fangfangsifangcai4.png", type: "video", title: "菜品很好吃的一家.." },
						],
					},
					{
						id: 202,
						mainImage: "http://www.hacn86.cn/alley-food/laohuaian.png",
						title: "老淮安・淮安菜",
						tags: ["淮扬菜", "老字号"],
						description: "以“南船北马”典故为背景，致力于传承淮安菜烹饪技艺与人文历史。可体验“三勺开菜”仪式..",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/laohuaian1.png", type: "image", title: "淮安老字号老淮安.. "},
							{ thumbnail: "http://www.hacn86.cn/alley-food/laohuaian2.png", type: "video", title: "终于吃上地道的淮.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/laohuaian3.png", type: "video", title: "老淮安—宴请亲朋.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/laohuaian4.png", type: "image", title: "适合聚餐的地道淮.."}
						],
					},
					{
						id: 203,
						mainImage: "http://www.hacn86.cn/alley-food/wenlou.png",
						title: "文楼饭店",
						tags: ["文楼蟹黄汤包", "文楼涨蛋"],
						description: "文楼饭店历史底蕴深厚，于清嘉庆年间创立。是体验淮安传统美食魅力的绝佳去处，能让你..",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenlou1.png", type: "image", title: "探文楼饭店，尝老.."},
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenlou2.png", type: "video", title: "在园林里吃淮扬菜.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenlou3.png", type: "video", title: "解锁淮安古文楼菜.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenlou4.png", type: "image", title: "文楼·非遗·淮扬菜.."}
						],
					},
				],
				// 分类2: 特产名菜 (3条模拟数据)
				[
					{
						id: 301,
						mainImage: "http://www.hacn86.cn/alley-food/ruandouchangyu.png",
						title: "软兜长鱼",
						tags: ["淮扬菜", "江苏十大经典名菜"],
						description: "淮扬人厚待中外宾客，最喜欢摆上这道“鲜嫩可口别具一格”的菜，让宾客尝鲜、赞口...",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/ruandouchangyu1.png", type: "image", title: "淮扬软兜"},
							{ thumbnail: "http://www.hacn86.cn/alley-food/ruandouchangyu2.png", type: "video", title: "细嫩鲜滑!"  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/ruandouchangyu3.png", type: "video", title: "软兜长鱼"  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/ruandouchangyu4.png", type: "image", title: "做会了..在淮安排.."}
						],
					},
					{
						id: 302,
						mainImage: "http://www.hacn86.cn/alley-food/poucairouyuan.png",
						title: "淮安蒲菜钦工肉圆",
						tags: ["淮扬菜", "天下第一笋"],
						description: "淮安盛产芦蒲，不但早就有了吃蒲菜的传统，而且一直保留。汉代文学家淮安人枚乘的...",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/poucairouyuan1.png", type: "video", title: "淮扬名菜钦工肉圆.. " },
							{ thumbnail: "http://www.hacn86.cn/alley-food/poucairouyuan2.png", type: "video", title: "开阳蒲菜肉圆味美.. " },
							{ thumbnail: "http://www.hacn86.cn/alley-food/poucairouyuan3.png", type: "video", title: "汤菜之冠”蒲菜.. " },
							{ thumbnail: "http://www.hacn86.cn/alley-food/poucairouyuan4.png", type: "video", title: "非遗美味钳工蒲菜.. " },
						]
					},
					{
						id: 303,
						mainImage: "http://www.hacn86.cn/alley-food/wenloutangbao.png",
						title: "文楼汤包",
						tags: ["传统小吃", "淮安特产"],
						description: "文楼汤包由淮安古镇文楼而得名，是江苏省著名的传统小吃。汤馅选料严谨，工艺独特..",
						mediaGrid: [
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenloutangbao1.png", type: "image", title: "文楼汤包：百年老.." },
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenloutangbao2.png", type: "video", title: "河下文楼蟹黄汤包.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenloutangbao3.png", type: "video", title: "文楼·早茶·淮扬.."  },
							{ thumbnail: "http://www.hacn86.cn/alley-food/wenloutangbao4.png", type: "image", title: "现做的文楼汤包有.."}
						],
					},
				]
			]
		};
	},
	methods: {
		// 切换顶部分类
		changeCategory(index) {
			this.currentCategoryIndex = index;
		},
		// 点击卡片跳转到详情页
		navigateToDetail(item) {
			console.log("Navigate to detail page for:", item.title);
			// 实际跳转逻辑
			// uni.navigateTo({ url: `/pages/food-detail/food-detail?id=${item.id}` });
			uni.navigateTo({
				url: `/pages_sub/index/alley-food-detail/alley-food-detail?id=${item.id}`
			});
		},
		// 点击视频封面跳转到播放页
		playVideo(media) {
			if (media.type !== 'video') return;
			console.log("Navigate to video player for:", media.thumbnail);
			// 实际跳转逻辑
			// uni.navigateTo({ url: `/pages/video-player/video-player?src=${media.videoUrl}` });
		}
	}
};
</script>

<style lang="scss" scoped>
.alley-food-component {
	padding: 20rpx;
}

/* 顶部Tab容器 */
.category-tabs {
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	margin-bottom: 30rpx;
	
}

.content-display-area{
	display: block;
}
/* 单个Tab项 - 核心样式改动 */
.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 140rpx;
	height: 200rpx; /* 调整高度以形成椭圆 */
	border-radius: 60rpx; /* 圆角设为宽度的一半，形成椭圆 */
	transition: all 0.3s ease-in-out;
	cursor: pointer;

	/* 未选中状态：白色背景 + 灰色阴影 */
	background-color: #ffffff;
	border: 4rpx solid #ffffff; // 添加一个白色边框，以便切换时尺寸不变
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.09);

	.tab-icon {
		width: 120rpx;
		height: 100rpx;
		background-color: #f8f8f8; // Icon背景色
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15rpx; /* 让图标看起来小一点 */
		box-sizing: border-box;
		margin-bottom: 8rpx;
	}

	.tab-text {
		font-size: 26rpx;
		color: #000; // 未选中文字颜色
		// margin-bottom: 5rpx;
	}
	.tab-sub{
		font-size: 20rpx;
		color: #666; // 未选中文字颜色
		margin-bottom: 10rpx;
	}

	/* 选中状态 */
	&.is-active {
		border-color: #E64C06; // 橙色边框
		background-color: #FF6D2B;
		box-shadow: 0 8rpx 25rpx rgba(255, 141, 66, 0.4); // 橙色阴影
		
		

		.tab-text {
			color: #FFFFFF; // 选中时文字颜色变为白色
			font-weight: bold;
		}
		.tab-sub{
			color: #FFFFFF; 
		}
	}
}

.content-card {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.08);

	.card-top {
		display: flex;
		background-color: #FFFDF5; 
		border-radius: 24rpx;     
		overflow: hidden;         
		height: 220rpx;            
		position: relative;
		
		.main-image {
			width: 220rpx;
			height: 220rpx;
			flex-shrink: 0;
			position: relative;
			z-index: 1; /* 图片层级设为1 */
		
			.image {
				width: 100%;
				height: 100%;
				display: block;
				border-start-end-radius: 70rpx;
				border-end-end-radius: 50rpx;
			}
			/* 2. 伪元素现在是 .main-image 的子元素，定位更精确 */
			// &::before,
			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	width: 50rpx;   /* 弧形的宽度，可以调整 */
			// 	height: 60rpx; /* 高度为图片的一半 */
			// 	z-index: 3;
			// 	/* 背景色必须和 .card-top 的背景色完全一样 */
			// 	background-color: #FFFDF5; 
			// }
				
			/* 3. 上半部分弧形 */
			// &::before {
			// 	top:100rpx;
			// 	right: -30rpx; /* 直接定位到图片容器的右上角 */
				
			// 	/* 只设置左下角圆角，形成向内的弧线 */
			// 	// border-bottom-left-radius: 80rpx; 
			// 	border-radius: 50%;
			// 	transform: rotate(40deg);
				
			// }
		}
	
		.info-section {
			flex: 1;
			// display: flex;
			// flex-direction: column;
			position: relative;
			padding: 10rpx 20rpx; // 为内容添加内边距
			box-sizing: border-box;
			z-index: 3;
	
			.info-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000000; /* 6. 标题明确为黑色 */
			}
	
			.info-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;
				margin: 10rpx 0;
			}
	
			.info-description {
				font-size: 26rpx;
				color: #666;
				line-height: 1.4;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
	
			.explore-button {
				position: absolute;
				bottom: 0;
				right: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: linear-gradient(135deg, #FFD18B, #FFA14D);
				color: #fff;
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
				flex-direction: column;
				font-size: 20rpx;
				transform: translate(20%, 20%); /* 微调按钮位置，使其部分溢出 */
	
				text {
					margin-top: 4rpx;
				}
			}
		}
	}

	/* 卡片下部样式 */
	.card-bottom {
		margin-top: 30rpx;
	
		/* 水平滚动容器 */
		.media-scroll-view {
			width: 100%;
			white-space: nowrap; // 核心：让子元素不换行，从而可以水平滚动
	
			/* 隐藏滚动条 */
			&::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
			}
		}
	
		/* 媒体列表的直接包裹层 */
		.media-list {
			display: flex; // 使用flex布局
			flex-wrap: nowrap; // 确保不换行
		}
	
		/* 单个媒体项 */
		.media-item {
			display: inline-flex; // 改为inline-flex或inline-block
			flex-direction: column;
			width: 180rpx; /* 设置固定宽度，以控制一行显示的数量 */
			margin-right: 10rpx;
			flex-shrink: 0; // 防止flex布局压缩项目
	
			&:last-child {
				margin-right: 0;
			}
	
			/* 媒体封面包裹层，用于实现长方形比例 */
			.media-thumbnail-wrapper {
				position: relative;
				width: 100%;
				height: 230rpx; /* 关键：设置固定高度，形成长方形 */
				margin-bottom: 12rpx;
				
				.image {
					width: 100%;
					height: 100%;
				}
	
				.play-icon-overlay {
					position: absolute;
					top: 12rpx;
					right: 12rpx;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
	
			/* 媒体标题 */
			.media-title {
				font-size: 24rpx;
				color: #333;
				white-space: normal; /* 允许标题文字换行 */
				line-height: 1.4;
				
				// 最多显示两行，超出部分显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}
}
</style>